<template>
	<view class="container">
		<view class="search">
			<uni-search-bar :focus="true" v-model="searchValue" @input="search" @clear="clear" cancelButton="none">
				<template #searchIcon>
					<image src="@/static/search/search.png" class="search_icon"></image>
				</template>
				<template #clearIcon>
					<image src="@/static/search/clear.png" class="search_clear_icon"></image>
				</template>
			</uni-search-bar>
			<view class="search_result">
				<view class="search_result_item" v-for="item in searchList" :key="item" @click="search(item)">
					<view class="search_result_content">
						<image src="@/static/search/clock.png" mode=""></image>
						{{item}}
					</view>
					<view class="search_result_clear" @click.stop="clearSearchStorage(item)">
						<image src="@/static/search/close.png" mode=""></image>
					</view>
				</view>
				<view class="search_clear_all" @click="clearSearchStorageAll">清空搜索记录</view>
			</view>
			<view class="no_search">
				<image src="@/static/search/no_search.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		clearStorageAll,
		clearStorage,
		debounce,
		setStorageList
	} from '@/utils/index.js'
	import {
		indexShop
	} from "@/service"

	const shopList = ref([])
	const getIndexShop = async () => {
		shopList.value = await indexShop()
	}
	const search_key = "SEARCH_LIST_KEY"
	const searchValue = ref('')
	const list = JSON.parse(uni.getStorageSync(search_key))
	const searchList = ref(list)

	const search = debounce((value) => {
		if (!value) {
			return
		}
		searchValue.value = value
		getIndexShop(value)
		const newList = setStorageList(search_key, value)
		searchList.value = newList
	})
	const clear = () => {
		searchValue.value = ''
	}
	const clearSearchStorage = (value) => {
		const newList = clearStorage(search_key, value)
		searchList.value = newList
	}
	const clearSearchStorageAll = () => {
		const newList = clearStorageAll(search_key)
		searchList.value = newList
	}
</script>

<style lang="scss" scoped>
	.container {
		background: $body-bc;
		min-height: 100vh;
		padding: 24rpx;


		.search {
			height: 74rpx;
			position: sticky;
			top: 0;
			padding: 0 16rpx;
			background: url(https://haoyingshou.oss-cn-guangzhou.aliyuncs.com/search_full_bc.png) no-repeat center / cover;

			.search_icon {
				width: 32rpx;
				height: 32rpx;
			}

			::v-deep .uni-searchbar__box {
				background: transparent !important;
			}

			.search_clear_icon {
				width: 30rpx;
				height: 30rpx;
			}

			::v-deep .uni-searchbar {
				padding: 0;
			}

			::v-deep .uni-searchbar__box-search-input {
				color: $title-color;
			}

		}

		.search_result {
			.search_result_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #1D4374;
				line-height: 94rpx;
				padding: 0 20rpx;

				.search_result_content {
					display: flex;
					align-items: center;
					color: $title-color;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #00C1FF;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 20rpx;

					}
				}

				.search_result_clear {
					image {
						width: 20rpx;
						height: 22rpx;
					}
				}
			}

			.search_clear_all {
				color: $content-color;
				font-family: FZLanTingHeiS-R-GB;
				font-weight: 400;
				font-size: 24rpx;
				margin-top: 34rpx;
				text-align: center;
			}
		}

		.no_search {
			margin-top: 380rpx;
			display: flex;
			justify-content: center;

			image {
				width: 158rpx;
				height: 185rpx;
			}
		}
	}
</style>